<!--顶部栏-->
<template>
  <div class="header-container">
    <div class="l-content">
      <el-button @click="handleMenu" icon="el-icon-menu" size="mini"></el-button>
    </div>
    <div class="r-content">
      <el-dropdown>
        <span style="color: white">Admin</span><i class="el-icon-arrow-down" style="margin-left: 5px;margin-right: 5px;color: white"></i>
        <el-dropdown-menu slot="dropdown">
<!--          <el-dropdown-item >个人信息</el-dropdown-item>-->
          <el-dropdown-item @click="navigateTo('/')">退出登录</el-dropdown-item>
          <!--上一句退出不了，不知道哪错了，但下一句注释里的可行，就不太美观-->
<!--          <router-link :to="'/'">退出登录</router-link>-->
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    handleMenu(){
      // 相当于调用这个方法
      this.$store.commit('CollapseMenu')
    },
    navigateTo(path) {
      this.$router.replace({ path });
    }
  }
}
</script>

<style lang="less" scoped>
.header-container {
  background-color: #545c64;
  height: 60px;
  width: auto;
  // 让按钮等居中
  display: flex;
  justify-content: space-between;
  align-items: center;
  // 不要紧贴边框
  padding: 0 20px;
}
</style>
